/*
 * @Description: 详细的车票组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:30:26
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:43:11
 */
<template>
  <div
    class="ticket_main"
    :class="selected ? 'selected_ticket': ''"
  >
    <div class="ticket_info flex-h">
      <div class="left_remark"></div>
      <div class="info">
        <div class="time fontsize38">{{ticket.time}}</div>
        <div class="surplus fontsize28">{{ticket.surplus}}</div>
      </div>
      <div class="price">
        <div
          v-if="ticket.discount && ticket.discount.info"
          class="discount"
        >
          <p class="discount_info fontsize32">{{ticket.discount.info}}</p>
          <p class="price_info fontsize24">
            <span class="original_price">￥{{ticket.original}}</span>
            <span class="discount_price">￥{{ticket.discount.price}}</span>
          </p>
        </div>
        <div
          v-else
          class="original fontsize38"
        >￥{{ticket.original}}</div>
      </div>
    </div>
    <div
      v-if="ticket.more"
      class="more_info"
    >
      <div
        class="show_more"
        :style="{height: (this.more.state ? showMoreHeight : '0')}"
      >
        <div class="ticket_info_area flex-h flex-hsb flex-hw">
          <div
            v-for="(day, index) in daysList"
            :key="index"
            class="day_ticket"
            :class="day.num ? '' : 'empty_day'"
          >
            <h3 class="fontsize28">{{day.num}}</h3>
            <p class="fontsize24">{{day.ticket}}</p>
          </div>
        </div>
        <p class="msg">*所选日期内，如遇无票情况将无法购买</p>
      </div>
      <div
        class="hide_more fontsize24"
        @click="toggleMoreInfo"
      >
        <span>{{more.msg}}</span>
        <i
          class="iconfont icon-downangel fontsize24"
          :class="more.state ? 'up_angle' : ''"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    ticket: {
      type: Object,
      default: null
    },
    selected: false
  },
  data () {
    return {
      more: { // 详情提示文字与详情伸缩状态
        msg: '展开发车详情',
        state: false
      },
      daysList: [ // 日期数据
        {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }, {
          num: 1,
          ticket: '余12'
        }
      ],
      showMoreHeight: 0 // 存储详情高度，用于动画
    }
  },
  mounted () {
    let daysLack = 7 - this.daysList.length % 7
    for (let i = 0; i < daysLack; i++) { // 当前时期长度不是7的倍数时将其补满，便于flex布局
      this.daysList.push({
        num: '',
        ticket: ''
      })
    }
    let daysLen = parseInt(this.daysList.length / 7)
    let size = parseFloat(document.getElementsByTagName('html')[0].style.fontSize)
    this.showMoreHeight = daysLen * 1.746667 * size + 'px' // 计算详情高度，用于动画实现
  },
  methods: {
    toggleMoreInfo () { // 切换详情伸缩状态
      this.more.state = !this.more.state
      this.more.msg = this.more.state ? '收起发车详情' : '展开发车详情'
    }
  }
}
</script>

<style lang="scss" scoped>
.ticket_main {
  width: 686px;
  margin: auto;
  margin-top: 32px;
  border-radius: 4px; /*no*/
  background-color: #f0f4fd;
  .ticket_info {
    transition: all 0.5s;
    padding: 20px 0;
    .left_remark {
      width: 10px;
      height: 28px;
      margin-top: 2px;
      background-color: #027aff;
    }
    .info {
      width: 138px;
      padding-left: 38px;
      .time {
        height: 56px;
        line-height: 50px;
      }
      .surplus {
        height: 40px;
        line-height: 40px;
        color: #666;
      }
    }
    .price {
      width: 468px;
      padding-right: 32px;
      text-align: right;
      .original {
        height: 96px;
        line-height: 96px;
        color: #027aff;
      }
      .discount {
        .discount_info {
          height: 56px;
          line-height: 50px;
          color: #027aff;
        }
        .price_info {
          height: 40px;
          line-height: 45px;
          .original_price {
            color: #999;
            text-decoration: line-through;
            padding-right: 28px;
          }
          .discount_price {
            color: #e84d38;
          }
        }
      }
    }
  }
  .more_info {
    margin-top: -14px;
    border-radius: 4px; /*no*/
    .hide_more {
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: #027aff;
      padding-bottom: 8px;
      i {
        width: 32px;
        height: 32px;
        display: inline-block;
        margin-left: 10px;
        transition: all 0.5s;
        position: relative;
        top: 2px;
      }
      .up_angle {
        transform: rotate(180deg);
      }
    }
    .show_more {
      height: 0;
      padding: 0 32px;
      overflow: hidden;
      transition: all 0.5s;
      .msg {
        color: #666;
        padding-bottom: 20px;
      }
      .ticket_info_area {
        .day_ticket {
          width: 80px;
          text-align: center;
          background-color: #fff;
          border-radius: 4px; /*no*/
          margin-bottom: 18px;
          h3 {
            height: 48px;
            line-height: 60px;
            color: #027aff;
          }
          p {
            height: 40px;
            line-height: 40px;
            color: #666;
          }
        }
        .empty_day {
          background-color: transparent;
        }
      }
    }
  }
}
.selected_ticket {
  background-color: #dae5fe;
}
</style>
